@charset "utf-8";

/* FABRICE : RESET du navigateur par Eric MEYER */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*fin du reset de MEYER*/



/* FABRICE grille */
*{
  box-sizing: border-box;
}
.row{
  overflow: hidden;
  margin-right: -15px;
  margin-left: -15px;
  /*width: 100%;*/
 }
.w100{
  width: 100%;
}
.w75{
  width: 75%;
}
.w66{
  width: 66.66%;
}
.w60{
  width: 60%;
}

.w50{
  width: 50%;
}
.w40{
  width: 40%;
}

.w33{
  width: 33.33%;
}

.w25{
  width: 25%;
 /* border: solid;*/
}

.w16{
  width: 16.66%;
}

.w10{
  width: 10%;
  /*border: solid aqua;*/
}


.w75, .w66, .w60, .w50, .w40, .w33, .w25, .w16,.w10 {
  float: left;
  /*border: solid;
  border-color: black;*/
}
.w66, .w60, .w50, .w40, .w33, .w25, .w75, .w100, .w16{
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  /* border:solid;*/
}

img{
  max-width: 100%;
}
.clearfix{
  clear: both;
  display: none;
}

/* fin de la grille */




/*FABRICE définition des polices*/
@font-face {
    font-family: 'bavroregular';
    src: url('../fonts/bavro-regular-webfont.eot');
    src: url('../fonts/bavro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bavro-regular-webfont.woff2') format('woff2'),
         url('../fonts/bavro-regular-webfont.woff') format('woff'),
         url('../fonts/bavro-regular-webfont.ttf') format('truetype'),
         url('../fonts/bavro-regular-webfont.svg#bavroregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.eot');
    src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff'),
         url('../fonts/roboto-light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: "robotomedium";
    src: url('../fonts/roboto-medium-webfont.eot');
    src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto-medium-webfont.woff') format('woff'),
         url('../fonts/roboto-medium-webfont.ttf') format('truetype'),
         url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}


p{
	font-family: "robotolight";
	color:#0A4958;
}


/* FABRICE : format du conteneur global "ct" */

#ct{
	width:100%;
	margin:0 auto;
	/*background-color:white;*/
	/*border: solid purple;*/
	
	}
	
	
	
/* FABRICE & FANETTE : on met l'image de nuage (image_footer.png) en background du body, de façon à ce qu'elle prenne 100% de la largeur d'écran et qu'elle apparaisse en fond dans la partie inférieure de la page */

body{
		background-image: url("../images/nuages_footer.png");
		/*background-attachment: fixed; /* Le fond restera fixe */
		background-repeat: no-repeat; /* Le fond ne sera pas répété */
		background-position: bottom; /* Le fond est par défaut placé en haut à gauche*/
}
	


/* FABRICE & FANETTE : largeur du contenu général (sauf animation qui elle prendra 100% de largeur d''écran)*/
	.largeur{
		width:80%;
		margin:0 auto;
		/*border: solid green;*/
	}
	
/*FABRICE & FANETTE : positionnement du header dans la page*/
header{	
	margin: 0 auto;	
	padding:0px;
	padding-top:0px;
	background-color:white;
	/*border:solid blue;*/
	overflow:hidden;
	position:fixed;
	z-index:2;
	top:0px;	
		}
	
/*FABRICE Mise en forme de la zone du logo*/
/* on réduit la taille de l'image du logo*/

#zonelogo{
	float:left;
	width:40%;
	margin-left:20px;
	height:100px;
	/*border:solid green;*/
		
}

#logo{
	display:block;
	/*float:left;*/
	/*height:60px;*/
	}
#textelogo{
	/*float:left;*/
	width:170px;
}	


#figlogo{
	display:block;
	/*border:solid;
	border-color:red;*/
	width:70px;
	float:left;
	margin-top:13px;
	
		
}

#figtextelogo{
	
	display:inline;
	/*border:solid;
	border-color:blue;*/
	height:40%;
	float:left;
	margin-top:32px;
	margin-left:10px;

}




/* FABRICE & FANETTE Mise en forme du menu principal*/


#menuprincipal{							
	text-align:center; /*centre les textes de chaque élément de ul */
	display:inline-block; /*ul est un élément block, du coup si on veut lui mettre une bordure celle-ci apparaitra
						sur toute la largeur de la page (sauf si on affecte à ul une largeur donnée, mais il n'y aura pas d'ajustement
						automatique au contenu si on change les éléments du menu), pour éviter cela, on va le transformer en élément "inline", 
						de façon à ce que la bordure s'adapte à la largeur du contenu ; MAIS
						si on le met en inline, tout ce qui est dessous va remonter, 
							alors on met inline-block et là ça marche */
	float:right;
	margin-top: 30px;
	
	
}

#menuprincipal li{
	display:inline-block; /*si on ne met pas cela, les éléments du menu seront les uns au dessus des autres 
	car on a demandé (voir ci dessous) que les li soient considérés comme des blocks, avec la commande display:block*/ 
}
	
#menuprincipal li a{
	text-decoration:none; /*pour enlever le souligné des liens*/
	display:block; /*pour pouvoir les éditer comme des boîtes car les li sont des éléments inline*/
	padding-bottom:10px;
	margin:15px;
	color:#0A4958;
	font-family:"robotoregular";
	font-size:1 rem;
	position:relative;
	box-sizing:border-box;
}



/*lorsqu'on survole un élément du menu, faire apparaître une barre horizontale  sous le libellé de la rubrique sélectionnée */

#menuprincipal li a::before {
	content:''; /*on rajoute une action*/
	display:block; /*devient bloc, donc occupe toute la ligne maintenant*/
	position:absolute; /* position par rapport à la page ou par rapport à l'élément parent si celui ci est en position relative, mais comme on est en position absolute, on n'est plus dans le flux ! on ne peut donc plus centrer les éléments dedans par margin: 0 auto; il faut donc utiliser les positions left...*/
	bottom:0;
	left:50%;
	width:40px;
	transform:translate(-50%,0px);/*translation en x : ici de la moitié de sa taille, et en y, ici on change rien en y */
	height:0px;
	background-color:#0A4958;
	transition:all 0.5s ease;
}

	
#menuprincipal li a:hover::before{
	width:100%;
	height:3px;
	background-color:#01B6AD;
	}
	

/*FABRICE & FANETTE positionnement de l'animation (nuages et mots) dans la page d'accueil*/

#animaccueil{
	margin-top:100px; /*on décale vers le bas tout ce qui est sous le header (de sa hauteur) de façon à ce qu'il ne remonte pas commele header est fixed*/
	/*border: solid green;*/
	}

#figanimaccueil{
	width:100vw;
	/*border: solid red;*/
	}



/*#nuage{
	width:100vw;
	}
*/
#canvas{
	width:100vw;
		}

	
	
	
	
/*FABRICE réseaux sociaux et  bouton impression*/
#boutonsRS{
	padding-top:100px;
	padding-right:20px;
	padding-left:10px;
	box-sizing:border-box;
	/*background-color:green;*/
	
	position:relative;
	top:0px;
	
}



.figRS{
	width:50%;
	margin-bottom:20px;
	cursor:pointer; /* pour faire apparaître la petite main au survol*/
}



/* FABRICE & FANETTE mise en forme du titre "Dictionet glossaire du web"*/


#dictionet{
	background-color:white;
	text-align:center;
	padding:20px;
	position:relative;
	margin-left:10%;
	/*border:solid orange;*/
}

h1, .titre{
	font-family:"robotolight";
	font-size:2rem;
	color:#0A4958;
	margin:20px 20px;
}

#dictionet::before { /* on rajoute le trait horizontal turquoise*/
	content:''; /*on rajoute une action*/
	display:block; /*devient bloc, donc occupe toute la ligne maintenant*/
	position:absolute; /* position par rapport à la page ou par rapport à l'élément parent si celui ci est en position relative, mais comme on est en position absolute, on n'est plus dans le flux ! on ne peut donc plus centrer les éléments dedans par margin: 0 auto; il faut donc utiliser les positions left...*/
	bottom:47%;
	left:35%;
	width:30%;
	height:3px;
	background-color:#01B6AD;
	
}

/*on remonte la section 1 avec dictionet par dessus l'animation, et on fait aussi remonter le reste (section2 et le footer)*/
#section1,#section2{
	position:relative;
	top:-165px;
	/*border: solid orange;*/
}

/* FABRICE & FANETTE mise en forme du main avec le message d'accueil sur le site*/
main{
	/*border:solid green;*/
}

#bienvenue{
	font-family:"robotomedium";
	padding:40px 0 20px 0;
}

#decouvrez{
	font-family:"robotoregular";
	margin:20px 0 20px 0;
	}
	
#bienvenue, #decouvrez{
	color:#0A4958;
	line-height:1.4rem;
	font-size:0.9rem;
	/*border:solid blue;*/
}


/*PIERRE-JEAN (code original : http://codepen.io/pjdorel/pen/KmvdOv), modifié par FABRICE & FANETTE mise en forme du bloc lettres*/

#alphabet{
	/*border:solid red;*/
	overflow:hidden;
	}
	
.lignelettre{
	display:flex;
	flex-wrap:wrap;/*on autorise ici à sauter de ligne si besoin, par exemple si la largeur mx des éléments enfants est atteinte*/
	box-sizing:border-box;/*pour éviter le gonflement*/
	margin:15px auto;
	/*border:solid thin grey;*/
	padding:0px;
	width:100%;
	}

.bloc_lettre{
	height:36px;
  width:36px;
  border-radius:4px;
  background-color: #0A4958;
  margin-right:20px;
  margin-bottom: 5px;
 /* float:left;*/
  display:table-cell;
  text-align:center;
  padding:6px;
  box-sizing:border-box;
  overflow:hidden;
  -moz-box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
  -webkit-box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
  box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
	 /*margin:0 auto; /* A RETENIR POUR LA VERSION MOBILE : les pavés se collent les uns aux autres*/
	transition:all 0.5s ease;
}

.bloc_lettreFIN{
	height:36px;
  width:36px;
  background-color: #0A4958;
  margin-right:0px;
  border-radius:4px;
 /* float:left;*/
  display:table-cell;
  text-align:center;
  padding:6px;
   margin-bottom: 5px;
  box-sizing:border-box;
  overflow:hidden;
  -moz-box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
  -webkit-box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
  box-shadow: 3px 3px 10px rgba(69,69,69,0.4);
   transition:all 0.5s ease;
}

.lettre{
	color:white;
  text-decoration:none;
  font-size:24px;
  font-family:bavro;
  line-height:24px;
  transition:all 0.5s ease;
  }

.bloc_lettre:hover, .bloc_lettreFIN:hover {
  background-color: #01B6AD;
}
.bloc_lettre:hover a, .bloc_lettreFIN:hover a{
  color:#0A4958;
  }
  
  .bloc_lettre:hover .lettre, .bloc_lettreFIN:hover .lettre  {
	  font-size:34px;
	   line-height:23px;
	   }
  
  
/*
.row{
   clear:left;
}
*/



/*PIERRE-JEAN (code original : http://codepen.io/pjdorel/pen/XRaQLw, modifié par FABRICE & FANETTE mise en forme du bloc aside, avec le mot du jour, les catégories, moteur de recherche, etc.*/

#aside{
	padding-top:45px;
	padding-left:10%;
	padding-right:0%;
	/*border: solid red;*/
	text-align:right;
}

h2{
	font-family:"robotomedium";
	font-size:1rem;
	color:#0A4958;
  padding-bottom:20px;
  text-transform:uppercase;
  /*float:right;*/
  /*border:solid blue;*/
  text-align : right;
}
.mot_du_jour p, .mots_ajoutes p{
  height:65px;
  width:300px;
  background-color: #f6e7d2;
  font-size:1.2rem;
  text-align:center;
  line-height:65px;
  display: inline-block;
  font-family:"robotomedium";
  color:#01B6AD;
}

.mot_du_jour p a, .mots_ajoutes p a{
	text-decoration:none; /*pour enlever le souligné des liens*/
	 color:#01B6AD;
}


.espace{
  height:50px;
}

#recherche_un_mot{
  box-sizing:border-box;
}

#textfield{
  display:inline-block;
  border:none;
  background-color: #f6e7d2;
  height:30px;
  width:185px;
  outline: 0px;
}

#rechercher{
  display:inline-block;
  height:30px;
  width:95px;
  color:white;
  border:none;
  background-color: #01B6AD;
  font-family: roboto light;
  outline: 0;
  margin-left:5px;
}

#categories{
	/*float:right;*/
	/*border:solid green;*/
}

.categorie a, .last_categorie a{
	text-align : right;
	font-family:"robotomedium";
	font-size:1rem;
	transition:all 0.5s ease;
	/*border:solid;*/
		}

.categorie{
  margin-bottom:15px;
  }
  
.categorie a{
  text-decoration:none;
  color:#01B6AD;
 }
 
.last_categorie a{
  text-decoration:none;
  color:#01B6AD;
   }
   
  .categorie:hover a, .last_categorie:hover a{/*au survol, la catégorie devient de couleur foncée*/
  color:#0A4958;
  }
 /*  
.mots_ajoutes{
  height:75px;
  width:300px;
  background-color: #f6e7d2;
  font-size:30px;
  text-align:center;
  line-height:75px;
  display: inline-block;
  color:#01B6AD;
}
*/





#proposition_mot{
  display:inline-block;
  height:30px;
  width:80px;
  color:white;
  border:none;
  background-color: #01B6AD;
  font-family: "robotolight";
  outline: 0;
}


/*FABRICE bouton vers haut de page*/
#vershautdepage{
	margin:10px auto;
	text-align:center;
	width:10%;
	}

#vershautdepage a{
		text-decoration:none;
}

#vershautdepage p{
	color:white;
	font-size:1rem;
	font-family: "robotolight";
	opacity: 0;
	transition: all 0.5s;

}

#triangle{
	width:20px;
	height:20px;
	left:50%;
	/*top:88px;/* hauteur du bloc de paragraphe moins la moitié de la longueur de la diagonale du carré */
	border-color:white transparent transparent white; /*couleur des bords : haut droite bas gauche*/
	border-width:3px;
	border-style:solid;
	border-radius:4px;
	transform:rotate(45deg);
	/*background-color:red;*/
	margin:0 auto;
	margin-top: 12px;
	/*position:absolute;*/
}

#vershautdepage:hover p{
	 opacity:1;
}



/* FANETTE (& FABRICE) mise en forme du footer"*/
#footer{
	/*border:solid pink;*/	
	overflow:hidden;
	background-color: #0a4958;
	width:100%;
	height:100px;
}

.footer{
	width:80%;
	margin:0 auto;
}


.footer .w33{
	float:left;
	text-align:center;
	padding:40px 40px;
}
#footer .footer .w33 a{
	text-decoration:none;
	color:white;
	font-family:"robotolight";
}

/* Fanette & Fabrice à partir du code de Pierre Jean pour le slider du Qui sommes nous, pour (ici) : le défilement des 5 derniers mots ajoutés */
.mots_ajoutes p{
  height:65px;
  width:300px;
  background-color: #f6e7d2;
  font-size:1.2rem;
  text-align:center;
  line-height:65px;
  display: inline-block;
  font-family:"robotomedium";
  color:#01B6AD;
   
}
.mots_ajoutes{
	margin-right: 0px;
}

#wrapper{
	width:300px;
	height:65px;
	position:relative;
	color:white;
	/*text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;*/
  margin:0 auto;
  background-color:rgba(23,50,12,0.5);
  margin-right:0px;
   
}

#slider-wrap{
	width:300px;
	height:65px;
	position:relative;
	overflow:hidden;
	margin-right: 0px;
	}

#slider-wrap ul#slider{
	width:100%;
	height:100%;
	
	position:absolute;
	top:0;
	left:0;	
	
}

#slider-wrap ul#slider li{
	float:left;
	position:relative;
	width:300px;
	height:65px;	
}

/*rajouté par Fabrice & Fanette :*/
#slider-wrap ul, #slider li p{
	display : inline-block;
}

#slider-wrap ul, #slider li {
	text-align:center;
	line-height:65px;
	display:block;
	width:100%;
}

/*btns*/
.btns{
	position:absolute;
	width:20px;
	height:30px;
	top:50%;
	margin-top:-25px;
	line-height:57px;
	
	
	/*
	width:50px;
	height:60px;
	top:50%;
	margin-top:-25px;
	line-height:57px;
	*/
	text-align:center;
	cursor:pointer;	
	/* background:rgba(0,0,0,0.1);*/
	
	z-index:100;
	
	
	-webkit-user-select: none;  
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-ms-user-select: none;
	
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	transition: all 0.1s ease;
}


i{
	color:#01B6AD;
	
}

i:hover{
	color:rgba(0,0,0,0.3);	
}

/*
#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
*/
#next{right:0px;}
#previous{left:0px; }


#counter{
	top: 30px; 
	right:35px; 
	width:auto;
	position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}


/*bar*/
#pagination-wrap{
	min-width:20px;
	margin-top:350px;
	margin-left: auto; 
	margin-right: auto;
	height:15px;
	position:relative;
	text-align:center;
}

#pagination-wrap ul {
	width:100%;
}

#pagination-wrap ul li{
	margin: 0 4px;
	display: inline-block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#fff;
	opacity:0.5;
	position:relative;
  top:0;
  
  
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
	opacity:1;
	box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;	
}

/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
	-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
	transition: all 0.3s cubic-bezier(1,.01,.32,1);	
}




/*FABRICE mise en forme de la partie spécifique à la page définition (définition.php)*/

#section2def{ /* les identifiants de terminant en "def" se rapportent à des sélecteurs dans la page de définition (définition.php)*/
	padding-top:150px;
}

#boutonsRSdef{
	padding-top:333px;
	padding-right:20px;
	padding-left:10px;
	box-sizing:border-box;
	/*background-color:green;*/
	width:80px;	
	position:fixed;
	top:0px;	
}

#maindef{
	margin-left:10%;	
}
#asidedef{
	padding-top:0px;
	padding-left:10%;
	padding-right:0%;
	/*border: solid red;*/
	text-align:right;
}

#definition{
	margin-top:80px;
}

#h2def{ /*mot en titre au dessus de sa définition*/
	font-family:"robotomedium";
	font-size:1rem;
	color:#0A4958;
  padding-bottom:20px;
  text-transform:uppercase;
   text-align : center;
}

#pdef{
	color:#0A4958;
	line-height:1.4rem;
	font-size:0.9rem;
	/*border:solid blue;*/
	font-family:"robotoregular";
	margin:20px 0 20px 0;
}